<template>
  <svg :class="svgClass" :style="svgStyle" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script lang="ts">
import { computed } from 'vue';
export default {
  name: 'BaseSvgIcon',
  props: {
    iconClass: { type: String },
    className: { type: String },
    size: {
      type: [Number, String],
      default: 16
    }
  },
  setup(props) {
    const iconName = computed(() => (props.iconClass ? `#icon-${props.iconClass}` : '#icon'));
    const svgClass = computed(() => (props.className ? `svg-icon ${props.className}` : 'svg-icon'));
    const svgStyle = computed(() => {
      const size = typeof props.size === 'number' ? `${props.size}px` : props.size;
      return {
        width: size,
        height: size
      };
    });
    return {
      iconName,
      svgClass,
      svgStyle
    };
  }
};
</script>

<style scoped lang="scss">
.svg-icon {
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
